<template>
    <view class="container">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <tab-bar
            :tabs="tabs"
            @clickTab="clickTab"
            :tabIndex="tabIndex"
            :hasBbottom="true"
            background="#ffffff"></tab-bar>
        <view class="main">
            <swiper v-if="loadOk" class="swiper" :style="{ height: listHeight }" :current="0" @change="swiperChange">
                <!-- <swiper-item v-for="(item,index) in tabs" :key="item.title"> -->
                <swiper-item>
                    <choose-date
                        ref="chooseDatePanel"
                        :startDate="startDate"
                        :endDate="endDate"
                        v-if="tabIndex == 4"
                        @selDate="selDate"></choose-date>
                    <view class="main-box">
                        <view class="customer-box">
                            <view class="customer-info" :class="{ other: type == 2 }">
                                <view class="name">
                                    <image src="/static/img/erp/icon_kh_white.png" class="icon"></image>
                                    {{ parentData.BName }}
                                </view>
                                <view class="sum" v-if="type == 1"><text>¥</text>{{ parentData.ArTotal }}</view>
                                <view class="sum" v-else><text>¥</text>{{ parentData.ApTotal }}</view>
                                <view class="advance">往来余额</view>
                            </view>
                        </view>
                        <view class="row-box">
                            <view class="row-title" v-if="type == 1">应收明细</view>
                            <view class="row-title" v-else>应付明细</view>
                        </view>
                    </view>
                    <detail-list
                        ref="detailList"
                        :type="type"
                        :height="sublistHeight"
                        @totalBack="waitTotalBack"></detail-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import utils from "@/utils/utils.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "../components/tab-bar.vue"
import purchaseList from "@/pages_work/components/purchase/purchase-list.vue"
import purchaseAction from "@/pages_work/components/purchase/purchase-action.vue"
import DetailList from "./detail-list.vue"
import chooseDate from "../components/choose-date.vue"
export default {
    components: {
        purchaseList,
        tabBar,
        purchaseAction,
        DetailList,
        chooseDate,
    },
    data() {
        return {
            config: {
                title: "应收明细",
                centerSlot: true,
                rightSlot: false,
                color: ["#333333"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        type: "scan",
                    },
                ],
            },
            listHeight: "",
            sublistHeight: "",
            loadOk: false,
            tabIndex: 0,
            tabs: [
                // {
                // 	title: "全部"
                // },
                {
                    title: "今日",
                },
                {
                    title: "本周",
                },
                {
                    title: "本月",
                },
                {
                    title: "本年",
                },
                {
                    title: "自定义",
                },
            ],
            waitTotal: 0,
            total: 0,
            type: 1, // 1 应收  2 应付
            parentData: {},
            searchForm: {
                bCode: "",
                startDate: utils.today().startDate,
                endDate: utils.today().endDate,
            },
            startDate: "",
            endDate: "",
        }
    },
    created() {
        let mainColor = this.easyGetColor("white")
    },
    onLoad(options) {
        if (options.type) {
            this.type = options.type
        }
        if (this.type == 1) {
            this.config.title = "应收明细"
        } else {
            this.config.title = "应付明细"
        }
        if (options.data) {
            this.parentData = JSON.parse(decodeURIComponent(options.data))
            this.searchForm.bCode = this.parentData.BCode
        }
    },
    mounted() {
        this.getListHeight()
        setTimeout(() => {
            if (this.$refs.detailList) {
                this.$refs.detailList.refresh(this.searchForm)
            }
        }, 300)
    },
    onShow() {
        //
    },
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.sublistHeight = e - 226 + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index || index == 4) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                    this.upTab()
                    if (this.tabIndex == 0) {
                        // 今日
                        this.searchForm.startDate = utils.today().startDate
                        this.searchForm.endDate = utils.today().endDate
                    } else if (this.tabIndex == 1) {
                        // 本周
                        this.searchForm.startDate = utils.thisWeek().startDate
                        this.searchForm.endDate = utils.thisWeek().endDate
                    } else if (this.tabIndex == 2) {
                        // 本月
                        this.searchForm.startDate = utils.thisMonth().startDate
                        this.searchForm.endDate = utils.thisMonth().endDate
                    } else if (this.tabIndex == 3) {
                        // 本年
                        this.searchForm.startDate = utils.thisYear().startDate
                        this.searchForm.endDate = utils.thisYear().endDate
                    } else if (this.tabIndex == 4) {
                        this.searchForm.startDate = this.startDate
                        this.searchForm.endDate = this.endDate
                        this.$refs.detailList.datas = []
                        this.$nextTick(() => {
                            this.$refs.chooseDatePanel.openStarDate()
                        })
                    }
                    this.$refs.detailList.refresh(this.searchForm)
                    // if(this.tabIndex != 4){
                    //     this.$refs.detailList.refresh(this.searchForm)
                    // }
                }, 20)
            }
        },
        selDate(e) {
            let dateArr = e.split(",")
            this.searchForm.startDate = dateArr[0]
            this.searchForm.endDate = dateArr.length > 1 ? dateArr[1] : dateArr[0]
            this.startDate = this.searchForm.startDate
            this.endDate = this.searchForm.endDate
            this.$refs.detailList.refresh(this.searchForm)
        },
        upTab() {
            this.$forceUpdate()
        },
        toNavPage(type) {
            let url = "/pages_erp/manage/balance"
            this.easyGoTo(url)
        },
        waitTotalBack(e) {},
    },
}
</script>

<style lang="scss">
/deep/.tabs {
    position: relative;
    &:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 1px;
        background: #ebebeb;
    }
}
.main-box {
    // height: 100%;
    // overflow-y: auto;
}
.customer-box {
    background: #ffffff;
    border-radius: 0px 0px 40rpx 40rpx;
    padding: 20rpx 40rpx 40rpx;
    color: #ffffff;
    margin-bottom: 12rpx;
    .customer-info {
        position: relative;
        display: flex;
        height: 300rpx;
        padding: 0 44rpx;
        border-radius: 40rpx;
        flex-flow: column;
        justify-content: space-between;
        color: #fff;
        background: url("~@/static/img/erp/bg_cus.png") no-repeat #f49c36;
        background-size: 100% 300rpx;
        &.other {
            background: url("~@/static/img/erp/bg_cus.png") no-repeat #565d77;
            background-size: 100% 300rpx;
        }
        .name {
            display: flex;
            padding-top: 38rpx;
            font-size: $size-32;
            .icon {
                width: 20px;
                height: 20px;
                margin-right: 8rpx;
            }
        }
        .sum {
            padding: 26rpx 0 12rpx 0;
            font-size: $size-52;
            font-weight: bold;
            text-align: center;
            text {
                font-size: $size-24;
                font-weight: normal;
                padding-right: 8rpx;
            }
        }
        .advance {
            padding-bottom: 80rpx;
            font-size: $size-24;
            text-align: center;
        }
    }
}
.row-box {
    margin: 0 $app-page-padding 0;
    .row-title {
        height: 80rpx;
        line-height: 80rpx;
        font-size: $size-32;
        font-weight: bold;
    }
    .row-item {
        padding: $app-item-padding;
        margin-bottom: 24rpx;
        background: #ffffff;
        border-radius: 24rpx;
        .item-head {
            display: flex;
            margin-bottom: 24rpx;
            .icon {
                position: relative;
                top: 2px;
                width: 32px;
                height: 32px;
                margin-right: 16rpx;
            }
            .info {
                flex: 1;
                font-size: $size-28;
                font-weight: bold;
                .name {
                    height: 40rpx;
                    line-height: 40rpx;
                }
                .no {
                    height: 40rpx;
                    line-height: 40rpx;
                }
            }
            .date {
                display: flex;
                justify-content: flex-start;
                font-size: $size-28;
                color: $color-gray-3;
            }
        }
        .item-con {
            background: #f5f5f5;
            border-radius: 12px;
            padding: 20rpx 32rpx 0;
            font-size: $size-28;
            .c-line {
                display: flex;
                justify-content: space-between;
                padding-bottom: 20rpx;
            }
        }
    }
}
.cr-main {
    color: $app-color-main;
}
</style>
